<template>
  <div class="comment">
    <van-row type="flex" justify="space-between">
      <van-col span="2" class="header" @click="goback">
        <van-icon name="cross" size="25" />
      </van-col>
      <van-col span="14" class="header">{{title}}</van-col>
      <van-col span="2" class="header">
        <van-icon name="label" size="20" color="#f7de90" />
      </van-col>
      <van-col span="4">
        <van-button round type="info" size="mini" color="#ffda67" @click="submit">发表</van-button>
      </van-col>
    </van-row>
    <div class="scoreBox">
      <van-collapse v-model="activeNames">
        <van-collapse-item name="1">
          <div slot="title">
            <van-row type="flex" justify="space-between">
              <van-col span="4" class="scoreTitle">总体</van-col>
              <van-col span="12">
                <van-rate
                  readonly
                  v-model="totalScore"
                  :size="25"
                  color="#ee0a24"
                  void-icon="star"
                  void-color="#eee"
                />
              </van-col>
              <van-col span="4" class="right">{{scoreComment[totalScore-1]}}</van-col>
            </van-row>
          </div>
          <van-row type="flex" justify="space-between">
            <van-col span="4" class="scoreTitle">口味</van-col>
            <van-col span="12">
              <van-rate
                v-model="tasteScore"
                :size="25"
                color="#ffda67"
                void-icon="star"
                void-color="#eee"
              />
            </van-col>
            <van-col span="4" class="right">{{scoreComment[tasteScore-1]}}</van-col>
          </van-row>
          <van-row type="flex" justify="space-between">
            <van-col span="4" class="scoreTitle">服务</van-col>
            <van-col span="12">
              <van-rate
                v-model="severScore"
                :size="25"
                color="#ffda67"
                void-icon="star"
                void-color="#eee"
              />
            </van-col>
            <van-col span="4" class="right">{{scoreComment[severScore-1]}}</van-col>
          </van-row>
          <van-row type="flex" justify="space-between">
            <van-col span="4" class="scoreTitle">环境</van-col>
            <van-col span="12">
              <van-rate
                v-model="envScore"
                :size="25"
                color="#ffda67"
                void-icon="star"
                void-color="#eee"
              />
            </van-col>
            <van-col span="4" class="right">{{scoreComment[envScore-1]}}</van-col>
          </van-row>
          <van-row type="flex" justify="space-between">
            <van-col span="4" class="scoreTitle">食材</van-col>
            <van-col span="12">
              <van-rate
                v-model="mScore"
                :size="25"
                color="#ffda67"
                void-icon="star"
                void-color="#eee"
              />
            </van-col>
            <van-col span="4" class="right">{{scoreComment[mScore-1]}}</van-col>
          </van-row>
        </van-collapse-item>
      </van-collapse>
    </div>
    <van-field
      v-model="message"
      rows="5"
      autosize
      type="textarea"
      placeholder="可分享口味，环境，服务，食材等方面的体验还可以用菜品标签评价菜品哦！"
    />
    <p align="right" style="fontSize:10px;color:#ccc;">写15个字，有机会被采纳为精选点评</p>
    <van-row>
      <van-col>
        <van-button plain hairline round type="primary" size="mini" color="#111">
          <van-icon name="plus" color="#f7de90" />标题
        </van-button>
        <van-button plain hairline round type="info" size="mini" color="#111">
          <van-icon name="plus" color="#f7de90" />话题
        </van-button>
      </van-col>
    </van-row>
    <van-row class="upBox">
      <van-col>
        <van-uploader :after-read="upload">
          <div class="upImg">
            <van-icon name="photo" color="#feb22f" size="25" />
            <span>上传照片</span>
          </div>
        </van-uploader>
      </van-col>
      <van-col offset="1">
        <van-uploader>
          <div class="upImg">
            <van-icon name="video" color="#feb22f" size="25" />
            <span>上传视频</span>
          </div>
        </van-uploader>
      </van-col>
      <van-col span="10" offset="1">
        <p style="fontSize:13px;color:#ccc;">
          100字+3张图或15秒视频有机会
          <span style="color:#f7de90">赢100积分</span>
        </p>
      </van-col>
    </van-row>
    <van-image v-if="preimg" width="100" height="100" :src="preimg" style="margin:10px;"/>
  </div>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant'

Vue.use(Toast)

export default {
  data () {
    return {
      id: '',
      title: '川西坝子(杨溪2.0知音店)',
      tasteScore: 1,
      severScore: 1,
      envScore: 1,
      mScore: 1,
      scoreComment: ['很差', '一般', '满意', '超赞', '极力推荐'],
      activeNames: [],
      message: '',
      imgFile: '',
      preimg: ''
    }
  },
  created () {
    this.id = location.hash.split('/')[2]
    this.$http.get('shops/shopDetail/' + this.id).then(res => {
      this.title = res.data.data.shopName
    })
  },
  methods: {
    async submit () {
      const res = await this.$http.post('remark', {
        userId: '2',
        shopId: this.id,
        totalStart: this.totalScore,
        tasteStart: this.tasteScore,
        serviceStart: this.severScore,
        envStart: this.envScore,
        foodStart: this.mScore,
        content: this.message,
        img: this.imgFile
      })
      if (res.status !== 200) return Toast.fail('发表失败')
      Toast.success('发表成功')
      this.$router.push('/')
    },
    async upload (e) {
      this.preimg = e.content
      var form = new FormData()
      form.append('file', e.file)
      const res = await this.$http.post('remark/upload', form)
      console.log(res)
      if (res.status !== 200) return Toast.fail('上传失败')
      Toast.success('上传成功')
      this.imgFile = res.data.data
    },
    goback () {
      this.$router.go(-1)
    }
  },
  computed: {
    totalScore () {
      return Math.floor(
        (this.tasteScore + this.severScore + this.envScore + this.mScore) / 4
      )
    }
  }
}
</script>

<style scoped lang="less">
.comment {
  padding: 10px;
}
.van-col {
  display: flex;
  justify-content: center;
  align-items: center;
}
.van-col.header {
  font-weight: 700;
}
.van-col.right {
  justify-content: flex-end;
}
.scoreBox {
  margin-top: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
  .scoreTitle {
    font-weight: 700;
  }
  .right {
    font-size: 12px;
    color: #ccc;
  }
}
.upBox {
  margin-top: 10px;
  .upImg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 75px;
    height: 75px;
    font-size: 12px;
    color: #ccc;
    border: 1px solid #ccc;
    border-radius: 10px;
  }
}
</style>
